<template>
    <div>
        <el-card>
            <div slot="header">
                主播 {{anchor.name}}
                <el-button type="text" @click="$router.push($route.path +'/edit')">编辑</el-button>
            </div>
            <el-form label-width="60px">
                <el-form-item label="平台">{{anchor.platform.name}}</el-form-item>
                <el-form-item label="直播间"><a target="_blank" :href="anchor.url">{{anchor.url}}</a></el-form-item>
                <el-form-item label="级别">{{anchor.level.name}}</el-form-item>
                <el-form-item label="经纪人">{{anchor.agent ? anchor.agent.username :'无'}}</el-form-item>
                <el-form-item label="分类">
                    <template v-if="anchor.option && anchor.option.categories.length > 0">
                        <el-tag v-for="(name,index) in anchor.option.categories" :key="index">{{name}}</el-tag>
                    </template>
                    <template v-else>
                        无
                    </template>
                </el-form-item>
            </el-form>
        </el-card>
        <br>
        <el-tabs type="border-card">
            <el-tab-pane label="小葫芦数据">
                <xiaohulu_data :anchor="anchor"/>
            </el-tab-pane>
            <el-tab-pane label="直播记录">
                <schedule_list mode="anchor" :anchor="anchor"/>
            </el-tab-pane>
            <el-tab-pane label="数据补抓">
                <anchor_data_collection :anchor="anchor"/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import Schedule_list from "../component/schedules_list";
    import Xiaohulu_data from "../component/xiaohulu_data";
    import Anchor_data_collection from "../component/anchor_data_collection";

    export default {
        components: {
            Anchor_data_collection,
            Xiaohulu_data,
            Schedule_list,
        },
        data() {
            return {
                anchor: {platform: {}, level: {}, agent: {}, option: {categories: []}}
            };
        },
        methods: {
            fetch() {
                const {id} = this.$route.params;
                this.$http.get('/api/xiaohulu/anchor/' + id).then(res => {
                    this.loading = false;
                    this.anchor = res.data;
                }).catch(() => {
                    this.$router.replace('/404');
                });
            },
        },
        mounted() {
            this.fetch();
        },
    }
</script>

<style scoped>

</style>